<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        var that;
        class Star {
            constructor(name) {
                that = this;
                this.name = name;
                this.btn = document.querySelector("button");
                this.btn.onclick = this.sing;
            }
            sing() {
                console.log(this);
                console.log(this.name, 'onlick'); //this指向了btn 
                // console.log(that.name, 'onlcik'); //通过that获取实例对象上的值
            }
            dance() {
                console.log(this, 'dangce'); //指向刘德华
            }
        }
        //总结 方法中水调用就指向谁 但是 在事件中 谁调用指向谁
        var adele = new Star("刘德华");
        // console.log(adele);
        // console.log(adele === that); //输出true  构造函数中的this指向的是实例对象
    </script>
</body>

</html>